<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: Andrey
  Date: 20.08.2014
  Time: 19:17
  To change this template use File | Settings | File Templates.
--%>
<c:if test="${not empty user}">

    <div class="page-header">
        <h2>Edit profile: user ${user.userLogin}</h2>
    </div>
    <div class="row">
        <div class="col-md-9">
            <form:form method="post" commandName="user" modelAttribute="user"
                       cssClass="form-horizontal">
            <div class="form-group">
                <label for="phoneNo" class="col-sm-3 control-label" id="userLogin">Phone No:</label>

                <div class="col-sm-9">
                    <form:input path="phoneNo" class="form-control" placeholder="Enter you phone No"/>
                </div>
            </div>
            <div class="form-group">
                <label for="userEmail" class="col-sm-3 control-label" id="userEmail">E-mail</label>

                <div class="col-sm-9">
                    <form:input path="userEmail" class="form-control" placeholder="Enter you phone Email"/>
                </div>
            </div>
            <div class="form-group">
                <label for="avaPath" class="col-sm-3 control-label" id="avaPath">URL to avatar:</label>

                <div class="col-sm-9">
                    <form:input path="avaPath" class="form-control" id="avaUrl" placeholder="Enter path to avatar"
                                onchange="changeAvatar()"/>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-3"></div>
                <div class="col-sm-7">
                    <button type="submit" class="btn btn-default">Save</button>
                </div>
            </div>
        </div>
        </form:form>
        <div class="col-md-3">
            <c:if test="${not empty user.avaPath}">
                <img id="avatarPreview" src="${user.avaPath}" class="img-thumbnail" width="226"
                     height="226"/>
            </c:if>
            <c:if test="${empty user.avaPath}">
                <img id="avatarPreview" src="https://vk.com/images/camera_200.gif" class="img-thumbnail" width="226"
                     height="226"/>
            </c:if>
        </div>
    </div>


</c:if>

<script>
    function changeAvatar() {
        var url = $("#avaUrl").val();
        $("#avatarPreview").attr("src", url);
    }
</script>